<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="js/vue.js"></script>
</head>

<body>
  <div id="app" class="root">
    <!-- 
      组件插槽的作用:
        - 父组件向子组件传递内容 
          父组件标签中的内容放入 slot 中,进行展示
      1. 插槽位置
        Vue.component('alert-box',{
          template:`
            <div class="demo-alert-box">
              <strong>Error!<strong>
              <slot><slot>
            </div>
          `
        })
      2. 插槽内容
        <alert-box>Something bad happended.</alert-box>
    -->
    <alert-box>有BUG发生</alert-box>
    <alert-box>有一个警告</alert-box>
    <alert-box></alert-box>
  </div>

  <script type="text/javascript">
    Vue.component('alert-box', {
      template: `
            <div>
              <strong>Error!</strong>
              <slot>默认内容<slot>
            </div>
          `
    })
    var vm = new Vue({
      el: '#app',
    });
  </script>
</body>

</html>